<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:with="http://www.thymeleaf.org/extras/with"
      layout:decorate="~{layout}"
      with:includeNavigation="true"
      with:includeFooter="true"
      with:includeScripts="true"
>
<th:block layout:fragment="content">
    <div class="page-content">
        <div class="page-title">
            <!-- If desktop -->
            <div class="mdl-cell mdl-cell--12-col  mdl-cell--hide-tablet mdl-cell--hide-phone">
                <h1 class="text--center">Plans and Pricing</h1>
            </div>
            <!-- If tablet -->
            <div class="mdl-cell mdl-cell--12-col mdl-cell--hide-desktop mdl-cell--hide-phone">
                <h2 class="text--center">Plans and Pricing</h2>
            </div>
            <!-- If mobile -->
            <div class="mdl-cell mdl-cell--12-col mdl-cell--hide-desktop mdl-cell--hide-tablet">
                <h3 class="text--center">Plans and Pricing</h3>
            </div>
        </div>

        <div class="plans content-panel mdl-grid">
            <div class="plan free-plan mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet mdl-cell--1-offset-tablet">
                <h2>Starter</h2>
                <!-- <img src="/assets/static.assets.images/pricing/free.svg?version={{ .Version }}" alt="Staffjoy Free Plan Logo" /> -->
                <svg width="60" height="54" viewBox="0 0 60 54" class="purple-house"><g fill="none"><g transform="translate(-300 -408)translate(290 395)"><polygon points="0 0 80 0 80 80 0 80"/><path d="M66.7 13.3L13.3 13.3 13.3 20 66.7 20 66.7 13.3 66.7 13.3ZM70 46.7L70 40 66.7 23.3 13.3 23.3 10 40 10 46.7 13.3 46.7 13.3 66.7 46.7 66.7 46.7 46.7 60 46.7 60 66.7 66.7 66.7 66.7 46.7 70 46.7 70 46.7ZM40 60L20 60 20 46.7 40 46.7 40 60 40 60Z" fill="#744fc6"/></g></g></svg>
                <span class="price">$9/month</span>
                <div class="divider"></div>
                <ul>
                    <li>Create a schedule for your business.</li>
                    <li>Share schedule with employees over email and text messages.</li>
                    <li>Up to 50 employees</li>
                </ul>
                <div class="button-container">
                    <a class="fill-width mdl-button mdl-js-button mdl-button--raised mdl-button--accent" href="/sign-up/">Sign Up</a>
                </div>
            </div>
            <div class="plan boss-plan  mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet mdl-cell--1-offset-tablet">
                <h2>Boss</h2>
                <img th:src="'/assets/images/pricing/boss.svg?version='+${page.version}" alt="Staffjoy Boss Plan Logo" />

                <span class="price">$29/month</span>
                <div class="divider"></div>
                <ul>
                    <li>Some features we’re working on: clocking in/out, payroll calculations, POS integrations</li>
                    <li>Up to 100 Employees</li>
                </ul>
                <div class="button-container">
                    <button class="fill-width disabled mdl-button mdl-js-button mdl-button--raised mdl-button--accent" disabled="disabled">Coming Soon</button>
                </div>
            </div>
            <div class="plan enterprise-plan mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet mdl-cell--1-offset-tablet">
                <h2>Enterprise</h2>
                <img th:src="|/assets/images/pricing/enterprise.svg?version=${page.version}|" alt="Staffjoy Enterprise Plan Logo" />
                <span class="price">Custom Pricing</span>
                <div class="divider"></div>
                <ul>
                    <li>Staffjoy helps with schedule automation.</li>
                    <li>Enter your employee availability and part or full-time status, and we will create a weekly schedule automatically based on your preferences.</li>
                    <li>Audit log and phone support</li>
                </ul>
                <div class="button-container">
                    <a class="fill-width primary mdl-button mdl-js-button mdl-button--raised mdl-button--accent" href="mailto:sales@staffjoy.com">Contact Us</a>
                </div>
            </div>
        </div>

        <div class="faqs content-panel">
            <h2 class="text--center">Frequently Asked Questions</h2>
            <div class="mdl-grid">
                <div class="faq mdl-cell mdl-cell--6-col">
                    <h3>Can I try it before I buy it?</h3>
                    <p>Of course! We want you to love scheduling with Staffjoy, so we offer a 30 day free trial. If you need more time to evaluate Staffjoy, please let us know!</p>
                </div>
                <div class="faq mdl-cell mdl-cell--6-col">
                    <h3>What happens when I grow?</h3>
                    <p>We know you’re running a great business and when you grow, we grow with you. No matter the size of your team, we can make a custom plan that meets your specific needs.</p>
                </div>
            </div>
        </div>
    </div>
</th:block>
</html>